<html>
  <head>
    <title>image</title>
  </head>
  <body>
    <script>
      // image

              /*
                    一、概述

                            图片组件


                    二、属性说明

                                    属性名	                    类型	        默认值	    说明	                                                          平台差异说明
                                1、src	                        String		              图片资源地址	
                                
                                2、mode	                        String	'scaleToFill'	  图片裁剪、缩放的模式	
                                
                                3、lazy-load	                  Boolean	    false	      图片懒加载。只针对page与scroll-view下的image有效	    微信小程序、百度小程序、抖音小程序、飞书小程序
                                
                                4、fade-show	                  Boolean	    true	      图片显示动画效果	                                        仅App-nvue 2.3.4+ Android有效
                               
                                5、webp	                        boolean	    false	      在系统不支持webp的情况下是否单独启用webp。
                                                                                        默认false，只支持网络资源。webp支持详见下面说明	                  微信小程序2.9.0
                               
                                6、show-menu-by-longpress	      boolean	    false	      开启长按图片显示识别小程序码菜单	                                微信小程序2.7.0
                               
                                7、draggable	                  boolean	    false	      是否能拖动图片	                                            H5 3.1.1+、App（iOS15+）
                               
                                8、@error	                      HandleEvent		          当错误发生时，发布到 AppService 的事件名，
                                                                                        事件对象event.detail = {errMsg: 'something wrong'}	
                               
                                9、@load	                      HandleEvent		          当图片载入完毕时，发布到 AppService 的事件名，
                                                                                        事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}	      
              */

              /*
                    三、图片格式说明

                                1、当使用浏览器/webview 渲染时，支持哪些图片格式由webView决定，详见： https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types#webp_image

                                2、当使用 uvue 原生渲染时支持的格式如下

                                          ①、bmp  √

                                          ②、gif  √

                                          ③、ico  √

                                          ④、jpg  √

                                          ⑤、png  √

                                          ⑥、webp √

                                          ⑦、heic （Android10+ 支持）√

                                          ⑧、avif  ×

                                          ⑨、tif

                                          ⑩、svg

                                3、可以通过插件来扩展app平台 nvue/uvue的图片支持，比如插件市场搜索 svgc插件 https://ext.dcloud.net.cn/search?q=svg

                                4、小程序上只支持网络地址的svg图

                                5、webp图片支持详解

                                         ①、Android4以上（含）、iOS14以上（含）系统内置支持webp，此时，不管web、小程序、app，也不管vue/nvue/uvue都可以直接使用webp；

                                         ②、iOS14以下，app-vue下，iOS不支持；app-nvue/uvue下，iOS支持；微信小程序2.9.0起，配置属性webp为true时iOS支持；

                                         ③、pc浏览器上，webp在不同浏览器的支持详见：https://caniuse.com/?search=webp

              */

              /*
                  四、mode 有效值

                              mode有14中模式，其中5中时缩放模式，9种是裁剪模式。



                                          模式	          值	             说明

                                        1、缩放	      scaleToFill	      不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

                                        2、缩放	      aspectFit	        保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

                                        3、缩放	      aspectFill	      保持纵横比缩放图片，只保证图片的短边能完全显示出来。
                                                                        也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

                                        4、缩放	      widthFix	        宽度不变，高度自动变化，保持原图宽高比不变

                                        5、缩放	      heightFix	        高度不变，宽度自动变化，保持原图宽高比不变 
                                                                        App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3

                                        6、裁剪	      top	              不缩放图片，只显示图片的顶部区域

                                        7、裁剪     	bottom	          不缩放图片，只显示图片的底部区域

                                        8、裁剪	      center	          不缩放图片，只显示图片的中间区域

                                        9、裁剪	      left	            不缩放图片，只显示图片的左边区域

                                        10、裁剪	    right	            不缩放图片，只显示图片的右边区域

                                        11、裁剪	    top left	        不缩放图片，只显示图片的左上边区域

                                        12、裁剪	    top right	        不缩放图片，只显示图片的右上边区域

                                        13、裁剪	    bottom left	      不缩放图片，只显示图片的左下边区域

                                        14、裁剪	    bottom right	    不缩放图片，只显示图片的右下边区域
              */

              /*
                  五、示例

                            <template>
                                <view class="page">
                                    <view class="image-list">
                                        <view class="image-item" v-for="(item,index) in array" :key="index">
                                            <view class="image-content">
                                                <image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
                                                    @error="imageError"></image>
                                            </view>
                                            <view class="image-title">{{item.text}}</view>
                                        </view>
                                    </view>
                                </view>
                            </template>

                            <\script>
                                export default {
                                    data() {
                                        return {
                                            array: [{
                                                mode: 'scaleToFill',
                                                text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
                                            }, {
                                                mode: 'aspectFit',
                                                text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
                                            }, {
                                                mode: 'aspectFill',
                                                text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
                                            }, {
                                                mode: 'top',
                                                text: 'top：不缩放图片，只显示图片的顶部区域'
                                            }, {
                                                mode: 'bottom',
                                                text: 'bottom：不缩放图片，只显示图片的底部区域'
                                            }, {
                                                mode: 'center',
                                                text: 'center：不缩放图片，只显示图片的中间区域'
                                            }, {
                                                mode: 'left',
                                                text: 'left：不缩放图片，只显示图片的左边区域'
                                            }, {
                                                mode: 'right',
                                                text: 'right：不缩放图片，只显示图片的右边边区域'
                                            }, {
                                                mode: 'top left',
                                                text: 'top left：不缩放图片，只显示图片的左上边区域'
                                            }, {
                                                mode: 'top right',
                                                text: 'top right：不缩放图片，只显示图片的右上边区域'
                                            }, {
                                                mode: 'bottom left',
                                                text: 'bottom left：不缩放图片，只显示图片的左下边区域'
                                            }, {
                                                mode: 'bottom right',
                                                text: 'bottom right：不缩放图片，只显示图片的右下边区域'
                                            }],
                                            src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
                                        }
                                    },
                                    methods: {
                                        imageError: function(e) {
                                            console.error('image发生error事件，携带值为' + e.detail.errMsg)
                                        }
                                    }
                                }

                             </、script>
              */
           
    </script>
  </body>
</html>